import React, { Component } from 'react';

class App extends Component {

  state = {
    first: '高',
    last: '举',
    msg: ''
  }

  // changeFirst(event){
  //   this.setState({
  //     first: event.target.value
  //   })
  // }

  // changeLast(e){
  //   this.setState({
  //     last: e.target.value
  //   })
  // }
  // 上面的两个方法除了修改的属性名不同，其他的所有内容都是可以公用的

  // 多个输入框绑定一个方法，该方法中设置值的时候需要用到标签的 name 属性
  // 所以我们标签中一定要定义一个需要设置的属性名
  changeValue(e){
    // console.log(e.target.name);
      this.setState({
        [e.target.name]: e.target.value
      })
  }

  render() {
    return (
      <div>
        <h1> {this.state.first} --- {this.state.last} </h1>

        <input type="text" name='first' value={this.state.first} onChange={(e)=>{this.changeValue(e)}} />
        <input type="text" name='last' value={this.state.last} onChange={(e)=>{this.changeValue(e)}} />

        <h1>{this.state.msg}</h1>
        <input type="text" name='msg' value={this.state.msg} onChange={(e)=>{this.changeValue(e)}} />

      </div>
    );
  }
}

export default App;
